.about{
    padding:5rem 0rem;
    padding-bottom:0rem;
}

.about .box{
    display: flex;
    justify-content: space-between;
}

.about .box .left{
    width:35rem;
    flex-shrink: 0;
}

.about .box .left img{
    z-index:-10;
    
}

.about .box .right{
    position: relative;
    z-index: 10;
}

.about .box .right .title{
    margin-bottom:3rem;
}

.about .box .right .title .short{
    text-transform: uppercase;
    font-size:1rem;
    font-family: Osl;
    color:#333232;
}

.about .box .right .title .long{
    font-family: Osl;
    font-size:2rem;
    color:#111;
    text-transform: uppercase;
    font-weight: 600;
}

.about .box .right .title .long span:first-child{
    padding-bottom:1.3rem;
    border-bottom: 3px solid #fcac45;
}

.about .box .right .title .long span:last-child{
    font-family: Osb;
}


.about .box .right .desc{
    color:#6c6c6c;
    font-family: Osi;
    text-align: left;
    line-height:1.7rem;
    margin-bottom:1.5rem;
}

.about .box .right .list{
    margin-bottom:4rem;
}
.about .box .right .title .short {
    text-transform: uppercase;
    font-size: 2rem;
}

.about .box .right .list li{
    background:url('../images/about-icon.png') no-repeat left center;
    text-indent: 1.2rem;
    font-family: Osi;
    margin-bottom:.7rem;
}

.about .box .right .list li span{
    font-weight: bold;
    font-family: Ossb;
}

.about .box .right .btn{
    text-align: left;
}

.about .box .right .btn a{
    width:12rem;
    display: inline-block;
    padding:.6rem 0rem;
    text-transform: uppercase;
    white-space: nowrap;
    background:#fff url('../images/about-btn.png') no-repeat .5rem center;
    color:#6c6c6c;
    font-weight: bold;
    border:1px solid #6c6c6c;
    text-align: center;
    border-radius: 4px;
    text-indent: 1rem;
    font-size:16px;
    transition: all linear .2s;
}

.about .box .right .btn a:hover{
    transform:scale(1.1);
}

@media screen and (max-width:990px) and (min-width:800px){
    .about .box .left{
        width:45%;
    }
    .about .box .left img{
        width:100%;
    }

}

@media screen and (max-width:800px){
    .about .box .left{
        display: none;
    }
    .about .box .right .title .long{
        text-align: center;
    }
    .about .box .right .title .short{
        text-align: center;
    }
    .about .box .right .list{
        margin-left: 5rem;
    }
    .about .box .right .desc{
        text-align: center;
    }
    .about .box .right .btn{
        margin-left: 9rem;
    }
    .about{
        padding:3rem 0rem;
    }
}
.team ul,li{
    list-style: none;
}
.team .po{
    width: 100%;
    height: 450px;
    position: relative;
}

.team .img2{
    width: 90%;
    height: 400px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    transition: all ease-in-out .5s;
    padding-left: 3rem;
}
.team input[name="photo"]:checked + li .img2{
    opacity: 1;
}
.team .more{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:2.5rem;
    margin:0 auto;

}
.team .more span label{

    display: inline-block;
    width:.5rem;
    height:.5rem;
    background:#fff;
    transition: all linear .1s;
    cursor: pointer;

}
.team .more span label:hover{
    background:#fcac45;
}
.team #photo1:checked ~ .more label[for="photo1"],.team #photo2:checked ~ .more label[for="photo2"],.team #photo3:checked ~ .more label[for="photo3"]{
    background: #fcac45;
}


.team .po .list{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.team .po .list .item{
    text-align: center;
    width:23%;
}

.team .po .list .img{
    width:10rem;
    height:10rem;
    margin:0 auto;
    border-radius: 100%;
    overflow:hidden;
    margin-bottom:1.5rem;
    transition: all linear .3s;
}

.team .po .list .img:hover{
    transform:translateY(-10px);
    box-shadow: 0px 0px 6px #fff;
}

.team .po .list .img img{
    width:100%;
    height:100%;
}

.team .po .list .item .name{
    color:#fff;
    margin-bottom:1.5rem;
}

.team .po .list .item .name .big{
    font-weight: bold;
    margin-bottom:.5rem;
    font-family: Ossb;
}

.team .po .list .item .desc{
    color:#fff;
    font-family: Osl;
}

.team{
    background:#070707;
    padding: 2rem 0;
}
.teambox{
    text-align: center;
}
.teambox .content{
    text-align: left;
    padding-left: 1rem;
    text-align: center;
}
.teambox .title{
    font-family: Ossb;
    color:#fff;
    font-size:2rem;
    text-transform: uppercase;
    background:#070707 url("../images/titlebg.png") no-repeat center bottom;
    padding-bottom:2rem;
    margin-bottom:4rem;
}


/* 媒体查询 */
@media screen and (max-width:780px) and (min-width:300px){
    .teambox .list{
        flex-wrap: wrap;
    }
    .team .po {
        width: 100%;
        height: 800px;

    }
    .teambox .list .item{
        width:100%;
        text-align: left;
        display: flex;
    }

    .teambox .list .item .content{
        padding-top:1.5rem;
    }
    .teambox .content{
        text-align: left;
    }
    .team .po .list .img{
    width: 23rem;
    height: 10rem;
    margin-left: 1rem;
    }
    .team .img2 {
        padding-left: 0rem;
    }
    .team .po .list .item {
        width: 100%;
    }
}


.some{
    background:#070707;
    padding:3rem 0rem;
}

.somebox{
    text-align: center;
}

.somebox .wan{
    font-family: Ossb;
    color: #ffffff;
    font-size:2rem;
    text-transform: uppercase;
    background:#070707  url("../images/titlebg.png") no-repeat center bottom;
    padding-bottom:2rem;
    margin-bottom:4rem;
}
.somebox .imgs{
    margin: 0 auto;
    margin-bottom: 3rem;
    align-items: center;
    justify-content: space-between;
    transition: all linear .3s;
}
.somebox .imgs img{
    width: 100%;
    height: 100%;
}
.somebox .imgs:hover{
    transform:translateY(-10px);
    box-shadow: 0px 0px 10px #fff;
}
.somebox .more{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:2.5rem;
    margin:0 auto;
    margin-top: 1rem;
}

.somebox .more span{
    display: inline-block;
    width:.4rem;
    height:.4rem;
    background:#fff;
    transition: all linear .1s;
    cursor: pointer;
}
.somebox .more span:hover{
    background:#fcac45;
}
@media screen and (max-width:1000px){
    .somebox  .imgs{
        margin: 0 auto;
        width:90%;
        margin-bottom: 2rem;
        height: auto;
    }

}
.take{
    background: #ffffff;
    padding:3rem 0rem;
}

.takebox{
    text-align: center;
}

.takebox .title{
    font-family: Ossb;
    color:#222222;
    font-size:2rem;
    text-transform: uppercase;
    background: #fff url("../images/titlebg.png") no-repeat center bottom;
    padding-bottom:2rem;
    margin-bottom:4rem;
}
.takebox .list{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:4rem;
}

.takebox .list .item{
    text-align: center;
    width:23%;
}

.takebox .list .img{
    width:10rem;
    height:10rem;
    margin:0 auto;
    border-radius: 100%;
    overflow:hidden;
    margin-bottom:1.5rem;
    transition: all linear .3s;
}

.takebox .list .img:hover{
    transform:translateY(-10px);
    box-shadow: 0px 0px 10px #222222;
}

.takebox .list .img img{
    width:100%;
    height:100%;
}
.takebox .txet p{
    margin-bottom: 2rem;
}
.takebox .list .item .name{
    color:#222222;
    margin-bottom:1.5rem;
}

.takebox .list .item .name .big{
    font-weight: bold;
    margin-bottom:.5rem;
    font-family: Ossb;
}

.takebox .list .item .desc{
    color:#222222;
    font-family: Osl;
}

.takebox .more{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:2.5rem;
    margin:0 auto;
}

.takebox .more span{
    display: inline-block;
    width:.4rem;
    height:.4rem;
    background:#fff;
    transition: all linear .1s;
    cursor: pointer;
}

.takebox .more span:hover{
    background:#fcac45;
}

@media screen and (max-width:710px){
    .takebox .list{
        flex-wrap: wrap;
    }
    .takebox .list .item{
        width:100%;
        text-align: left;
        display: flex;
    }

    .takebox .list .item .content{
        padding-top:1.5rem;
    }

    .takebox .list .img{
        margin:1rem;
        width:64%;
        height:auto;
    }
}


.work{
    padding:5rem 0rem;
}

.workbox{
    text-align: center;
}

.workbox .title{
    font-family: Ossb;
    color:#111;
    font-size:2rem;
    text-transform: uppercase;
    background:#fff url("../images/titlebg.png") no-repeat center bottom;
    padding-bottom:2rem;
    margin-bottom:4rem;
}

.workbox .desc{
    width:90%;
    margin:0 auto;
    font-family: Osi;
    color:#6c6c6c;
    margin-bottom:5rem;
}

.worklist{
    width:90%;
    margin:0 auto;
}

.worklist .nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:1rem;
}

.worklist .nav .left{
    font-family: Osb;
    text-transform: uppercase;
}


.worklist .nav .right .typelist{
    display: flex;
}

.worklist .nav .right .typelist a{
    display: inline-block;
    color:#111;
    padding:0rem .5rem;
    border-right:1px solid #bebebe;
    text-transform: uppercase;
    font-size:.8rem;
    transition: all linear .2s;
}

.worklist .nav .right .typelist a:last-child{
    border-right: 0px;
}

.worklist .nav .right .typelist a:hover{
    font-weight: bold;
}

.worklist .list{
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.worklist .list .item{
    width:23%;
    height:13rem;
    position: relative;
    margin-bottom:1rem;
    overflow:hidden;
}

.worklist .list .item:hover .box{
    top:0%;
}

.worklist .list .item img{
    width:100%;
    height:100%;
}


.worklist .list .item .box{
    position: absolute;
    left:0;
    top:-100%;
    width:100%;
    height:100%;
    background:#222222;
    color:#fff;
    transition: all linear .2s;
}

.worklist .list .item .box .big{
    font-family: Osl;
    text-transform: uppercase;
    margin-bottom:.5rem;
    margin-top:2rem;
}

.worklist .list .item .box .small{
    color:#888888;
}

.worklist .list .item .box .more{
    position: relative;
    top:25%;
    color:#f8a944;
    border:1px solid #f8a944;
    width:2rem;
    height:2rem;
    line-height:2rem;
    border-radius: 100px;
    display: inline-block;
    cursor: pointer;
    font-size:1.5rem;
}

@media screen and (max-width:600px){
    .worklist .nav .left{
        display: none;
    }

    .worklist .nav .right{
        width:94%;
        margin:0 auto;
    }

    .worklist .list{
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .worklist .list .item .box .more{
        top: 10%;
    }
    .worklist .list .item{
        width:40%;
        height: auto;
        margin-bottom:2rem;
    }
}


/* work end */




/* 客户端 start  */
.our{
    background:#070707;
    padding:3rem 0rem;
}
.ourbox{
    text-align: center;
}
.ourbox .title{
    font-family: Ossb;
    color:#ffff;
    font-size:2rem;
    text-transform: uppercase;
    background: #070707 url("../images/titlebg.png") no-repeat center bottom;
    padding-bottom:2rem;
    margin-bottom:4rem;
}
.ourbox .text{
    width: 50rem;
    height: 3rem;
    margin: 0 auto;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    text-align: center;
    padding-bottom: 2rem;
}
.ourbox p{
    justify-content: space-between;
    align-items: center;
    text-align: center;
    color: #fff;
}
.ourbox .more{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width:2.5rem;
    margin:0 auto;
    margin-top: 1rem;
}

.ourbox .more span{
    display: inline-block;
    width:.4rem;
    height:.4rem;
    background:#fff;
    transition: all linear .1s;
    cursor: pointer;
}
.ourbox .more span:hover{
    background:#fcac45;
}
@media screen and (max-width:900px){
    .ourbox .text{
        width: 100%;
        margin: 0 auto;
    }
}
/* 客户端 end  */


/* 联系我们 start */
.contact{
    padding:5rem 0rem;
}

.contactbox{
    text-align: center;
}

.contactbox .title{
    font-family: Ossb;
    color:#111;
    font-size:2rem;
    text-transform: uppercase;
    background:#fff url("../images/titlebg.png") no-repeat center bottom;
    padding-bottom:2rem;
    margin-bottom:2rem;
}

.contactbox .desc{
    width:90%;
    margin:0 auto;
    font-family: Osi;
    color:#6c6c6c;
    margin-bottom:5rem;
}


.contact-form{
    width:90%;
    margin:0 auto;

}

.contact-form .info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:1rem;
}

.contact-form .info>div{
    width:48%;
    text-align: left;
}

.contact-form .info .formtitle{
    margin-bottom:.5rem;
}

.contact-form .info .formtitle sup{
    color:red;
}

.contact-form .info input{
    width:100%;
    height:1.8rem;
    line-height:1.8rem;
}


.contact-form .message{
    width:100%;
    text-align: left;
    margin-bottom:2rem;
}

.contact-form .message .formtitle{
    margin-bottom:.5rem;
}

.contact-form .message textarea{
    width:100%;
    height:10rem;
}

.contact-form .submit{
    text-align: right;
    width:100.7%;
}

.contact-form .submit .btn{
    width:10rem;
    height:2.5rem;
    line-height:2.5rem;
    text-align: center;
    font-size:1rem;
    color:#fff;
    border:0px;
    background:#fcac45;

}
